<template>
	<view>
	
	<uni-popup ref="buymenu" type="bottom">
		<view class="home">
		<view class="shop">
			<view class="shop-head">
				<view style="display: flex;">
					<image src="../../static/login.jpg"></image>
					<view class="shop-head-price">
						<view>￥</view>
						<view>{{buyitem.price}}</view>
					</view>
				</view>			
				<view class="shop-head-close">
					<text class="iconfont icon-guanbi" @click="closepop()"></text>
				</view>
			</view>
			<view class="shop-top shop-item">
				<view class="shop-top-left">
					<view class="shop-top-left-icon">
						<text class="iconfont icon-dizhi"></text>
					</view>
					<view class="shop-top-left-r">
						<view class="shop-top-left-r-1">{{megrecive.username}} {{megrecive.address}}</view>
						<view class="shop-top-left-r-2">包邮 送运费险 预计{{megrecive.date}}送达</view>
					</view>
				</view>
				<view class="shop-top-right">
					<text class="iconfont icon-xiangyoujiantou"></text>
				</view>
			</view>
			<view class="shop-count shop-item">
				<view class="shop-count-num">
					<view>数量</view>
					<view><NumberBox @popnum="popnum"></NumberBox></view>
				</view>
				<view class="shop-count-remark">
					<view>订单备注</view>
					<view>
						<view class="shop-count-remark-r">无备注</view>
					</view>
				</view>
			</view>
			<view class="shop-pay shop-item">
				<view class="shop-pay-content">
					<view class="shop-pay-content-left">
						<text class="iconfont icon-weixin"></text>
						<view>微信</view>
					</view>
					<view>
						<radio></radio>
					</view>
				</view>
				<view class="shop-pay-content">
					<view class="shop-pay-content-left">
						<text class="iconfont icon-fukuan"></text>
						<view>先用后付</view>
					</view>
					<view class="shop-pay-content-right">
						开通
					</view>
				</view>
			</view>
			<view class="shop-privacy shop-item">
				<view class="shop-privacy-left">
					<view class="shop-privacy-left-1">
						<text class="iconfont icon-anquanyinsi"></text>
					</view>
					<view>
						<view class="shop-privacy-left-big">号码保护</view>
						<view class="shop-privacy-left-small">隐藏收件人真实手机号，保护隐私</view>
					</view>
				</view>
				<view>
					<radio></radio>
				</view>
			</view>		
		</view>
		<view class="shop-foot">
				<view class="shop-foot-total">
					<text class="iconfont icon-zhangdan"></text>
					<view>小计￥{{totalp}}</view>
				</view>
				<view class="shop-foot-btn">
					<button @click="payBtn()">立即支付</button>	
				</view>						
		</view>
		</view>
		
	</uni-popup>
	<uniPopmsg ref="popmsg" type="center" :recive="megrecive"></uniPopmsg>
	</view>
</template>


<script>
	import NumberBox from'@/tuniao-ui/components/tn-number-box/tn-number-box.vue'
	import getDateTime from "@/common/getDateTime.js"
	import uniPopmsg from"@/components/uniPopmsg/uniPopmsg.vue"
	export default {
		name:"uniPopshop",
		components:{
			NumberBox,
			uniPopmsg
		},
		data() {
			return {
				num:1,
				totalp:0,
				params:{
					ordercode:"",
					userid:1,
					leafid:1,
					num:100,
					count:1,
					price:0,
					date:"",
					state:3,
					username:'',
					address:'',
					phone:''
					//state:3待发货
				}
			};
		},
		onShow(){
			console.log("showdwedw")
			this.getMessage()
		},
		methods:{
			openMsgpop(){
				console.log("ref",this.$refs.biehd)
				this.$refs.popmsg.openpop();
			},
			//接收从数量增加盒子传来的数量参数
			popnum(data){
				//数量规格
				this.num=data.data
				this.totalp=this.num*this.buyitem.price
			},
			openpop(){
				this.$refs.buymenu.open()
				this.totalp=this.buyitem.price
			},
			closepop(){
				this.$refs.buymenu.close()
			},
			payBtn(){
				uni.showToast({
					title:'支付成功'
				})
				let time=getDateTime.dateTimeStr('ymdhis')
				let mark=Math.floor(Math.random() * (2000 - 1000 + 1)) + 1000
				let uid=this.$baseName.user.userid
				let order=uid+time+mark
				this.params.ordercode=order
				this.params.userid=uid
				this.params.leafid=this.buyitem.leaf_id
				this.params.date=getDateTime.dateTimeStr('y-m-d h:i:s')	
				this.params.count=this.num
				this.params.price=this.num*this.buyitem.price
				console.log("传来的参数2",this.params)
				this.addOrder()
				this.addOadres()
				console.log("传来的参数1",this.buyitem)
				this.changeStore()
				this.closepop()
			},
			addOrder(){
				uni.request({
					url:this.$baseUrl+'order/add',
					method:'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'支付失败'
							})
						}
						// this.LeafList=res.data.list
					}
				})
			},
			addOadres(){
				this.params.username=this.megrecive.username
				this.params.address=this.megrecive.address
				this.params.phone=this.megrecive.phone
				console.log("传的参数",this.megrecive)
				uni.request({
					url:this.$baseUrl+'oadres/add',
					method:'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'支付失败'
							})
						}
						// this.LeafList=res.data.list
					}
				})
			},
			changeStore(){
				console.log("参数是啥",this.params)
				uni.request({
					url:this.$baseUrl+'change/store',
					method:'POST',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'改库存失败'
							})
						}
						console.log("更改库存成功")
						// this.LeafList=res.data.list
					}
				})
			}
		},
		props:{
			buyitem:{
				type:Object,
				default(){
					return {}
				}
			},
			megrecive:{
				type:Object,
				default(){
					return {}
				}
		}
		// leafNum:{
		// 	type:Object,
		// 	default:"100"
		// }
	}
	}
</script>

<style lang="scss">
	.home{
		background:#dedede;
		.shop{
			background: #dedede;
			padding: 10px;
			.shop-item{
				background: white;
				padding: 10px;
				border-radius: 15px;
				margin: 10px 0;
			}
			.shop-head{
				display: flex;
				justify-content: space-between;
				image{
					width: 50px;
					height: 50px;
				}
				.shop-head-price{
					display: flex;
					text-align: center;
					padding: 20px 0px 10px 10px;
					font-size: 20px;
					color: red;
				}
				.shop-head-close{
					padding-left: 220px;
					padding-top: 20px;
				}
			}
			.shop-top{
				display: flex;
				justify-content: space-between;
				.shop-top-left{
					display: flex;
					
					.shop-top-left-icon{
						padding: 10px;
						text{
							color: #e67b2a;
							font-size: 20px;
						}
					}
					.shop-top-left-r{
						.shop-top-left-r-1{
							padding-bottom: 5px;
							font-size: 15px;
						}
						
						.shop-top-left-r-2{
							color: gray;
						}
					}
					.shop-top-right{
						padding-left: 80px;
						padding-top: 10px;
					}
				}
			}
			.shop-count{
				padding-left: 10px;
				.shop-count-num{
					display: flex;
					justify-content: space-between;
					padding-bottom: 20px;
					padding-left: 10px;
				}
				.shop-count-remark{
					display: flex;
					justify-content: space-between;
					padding-left: 10px;
					.shop-count-remark-r::after{
						font-family: "iconfont"!important;
						content: "\e65f";		
					}
				}
			}
			.shop-pay{
				.shop-pay-content{
					display: flex;
					justify-content: space-between;
					.shop-pay-content-left{
						display: flex;
						text{
							padding: 10px;
							font-size: 20px;
							color: green;
						}
						view{
							padding-top: 10px;
						}
					}
					.shop-pay-content-right::after{
						font-family: "iconfont"!important;
						content: "\e65f";
					}
				}
			}
			.shop-privacy{
				display: flex;
				justify-content: space-between;
				.shop-privacy-left{
					display: flex;
					.shop-privacy-left-1{
						padding: 10px;
						text{
							color: #e67b2a;
							font-size: 20px;
						}
					}
					.shop-privacy-left-big{
						padding-bottom: 5px;
						font-size: 15px;
					}
					.shop-privacy-left-small{
						color: gray;
					}
				}
			}
			
		}
		.shop-foot{
			background:white;
			.shop-foot-total{
				display: flex;
				text{
					padding: 20px;
					font-size: 20px;
					color: #e67b2a;
				}
				view{
					padding-top: 20px;
					color: red;
				}
			}
			.shop-foot-btn{
				padding: 0 10px;
				button{
					background: #ffa200;
					border-radius: 15px;
				}
			}
		}
	}

</style>